{% extends 'base.html' %}
{% load ticket_filters %}

{% block title %}分配工单 - 维修管理系统{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>我的分配工单</h2>
        <span class="badge bg-primary">
            技术人员: {{ user.username }}
        </span>
    </div>

    {% if messages %}
    <div class="alert alert-info">
        {% for message in messages %}
        <div>{{ message }}</div>
        {% endfor %}
    </div>
    {% endif %}

    {% if tickets %}
    <div class="row">
        <!-- 设备分配状态工单 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">设备分配工单</h5>
                </div>
                <div class="card-body">
                    {% for ticket in tickets %}
                        {% if ticket.status == 'assigned' %}
                        <div class="border rounded p-3 mb-3">
                            <h6>{{ ticket.title }}</h6>
                            {% if ticket.ticket_number %}
                            <small class="text-muted">工单号: {{ ticket.ticket_number }}</small>
                            {% endif %}
                            <div class="mb-2">
                                <span class="badge bg-primary">设备分配</span>
                                <span class="badge 
                                    {% if ticket.priority == 'high' %}bg-danger
                                    {% elif ticket.priority == 'medium' %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                            </div>
                            <p class="text-muted small mb-2">
                                {{ ticket.description|truncatewords:20 }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    分配: {{ ticket.assigned_at|date:"m-d H:i" }}
                                </small>
                                <a href="{% url 'tickets:ticket_process' ticket.pk %}" class="btn btn-sm btn-primary">
                                    开始检测
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% with assigned_count=tickets|filter_status:'assigned' %}
                    {% if not assigned_count %}
                    <div class="text-center text-muted py-3">
                        <i class="bi bi-check-circle"></i>
                        <p>暂无设备分配工单</p>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
            </div>
        </div>

        <!-- 检测中工单 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">检测中工单</h5>
                </div>
                <div class="card-body">
                    {% for ticket in tickets %}
                        {% if ticket.status == 'testing' %}
                        <div class="border rounded p-3 mb-3">
                            <h6>{{ ticket.title }}</h6>
                            {% if ticket.ticket_number %}
                            <small class="text-muted">工单号: {{ ticket.ticket_number }}</small>
                            {% endif %}
                            <div class="mb-2">
                                <span class="badge bg-warning">检测中</span>
                                <span class="badge 
                                    {% if ticket.priority == 'high' %}bg-danger
                                    {% elif ticket.priority == 'medium' %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                            </div>
                            <p class="text-muted small mb-2">
                                {{ ticket.description|truncatewords:20 }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    检测开始: {{ ticket.testing_at|date:"m-d H:i" }}
                                </small>
                                <a href="{% url 'tickets:ticket_process' ticket.pk %}" class="btn btn-sm btn-warning">
                                    继续处理
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% with testing_count=tickets|filter_status:'testing' %}
                    {% if not testing_count %}
                    <div class="text-center text-muted py-3">
                        <i class="bi bi-hourglass-split"></i>
                        <p>暂无检测中工单</p>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
            </div>
        </div>

        <!-- 维修中工单 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">维修中工单</h5>
                </div>
                <div class="card-body">
                    {% for ticket in tickets %}
                        {% if ticket.status == 'repairing' %}
                        <div class="border rounded p-3 mb-3">
                            <h6>{{ ticket.title }}</h6>
                            {% if ticket.ticket_number %}
                            <small class="text-muted">工单号: {{ ticket.ticket_number }}</small>
                            {% endif %}
                            <div class="mb-2">
                                <span class="badge bg-info">维修中</span>
                                <span class="badge 
                                    {% if ticket.priority == 'high' %}bg-danger
                                    {% elif ticket.priority == 'medium' %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                            </div>
                            <p class="text-muted small mb-2">
                                {{ ticket.description|truncatewords:20 }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    维修开始: {{ ticket.repairing_at|date:"m-d H:i" }}
                                </small>
                                <a href="{% url 'tickets:ticket_process' ticket.pk %}" class="btn btn-sm btn-info">
                                    继续处理
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% with repairing_count=tickets|filter_status:'repairing' %}
                    {% if not repairing_count %}
                    <div class="text-center text-muted py-3">
                        <i class="bi bi-tools"></i>
                        <p>暂无维修中工单</p>
                    </div>
                    {% endif %}
                    {% endwith %}
                </div>
            </div>
        </div>

        <!-- 已完成工单 -->
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">已完成工单</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>工单号</th>
                                    <th>工单标题</th>
                                    <th>优先级</th>
                                    <th>完成时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for ticket in tickets %}
                                    {% if ticket.status == 'completed' or ticket.status == 'closed' %}
                                    <tr>
                                        <td>
                                            {% if ticket.ticket_number %}
                                            <small class="text-muted">{{ ticket.ticket_number }}</small>
                                            {% else %}
                                            <small class="text-muted">-</small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <strong>{{ ticket.title }}</strong>
                                            {% if ticket.assets.exists %}
                                            <br>
                                            <small class="text-muted">
                                                设备: 
                                                {% for asset in ticket.assets.all %}
                                                <span class="badge bg-light text-dark me-1">{{ asset.code }}</span>
                                                {% endfor %}
                                            </small>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge 
                                                {% if ticket.priority == 'high' %}bg-danger
                                                {% elif ticket.priority == 'medium' %}bg-warning
                                                {% else %}bg-info{% endif %}">
                                                {{ ticket.get_priority_display }}
                                            </span>
                                        </td>
                                        <td>
                                            {% if ticket.completed_at %}
                                            {{ ticket.completed_at|date:"Y-m-d H:i" }}
                                            {% else %}
                                            <span class="text-muted">未记录</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a href="{% url 'tickets:ticket_detail' ticket.pk %}" class="btn btn-sm btn-outline-primary">
                                                查看详情
                                            </a>
                                        </td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% if not tickets|filter_status:'completed' and not tickets|filter_status:'closed' %}
                    <div class="text-center text-muted py-3">
                        <i class="bi bi-clipboard-check"></i>
                        <p>暂无已完成工单</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="text-muted">
            <i class="bi bi-inbox" style="font-size: 3rem;"></i>
            <h4 class="mt-3">暂无分配工单</h4>
            <p>您还没有被分配任何维修工单</p>
        </div>
    </div>
    {% endif %}
</div>

<style>
.container {
    max-width: 1400px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    border-radius: 8px 8px 0 0 !important;
}
.badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}
.btn {
    border-radius: 5px;
}
.alert {
    border-radius: 5px;
    margin-bottom: 20px;
}
.table th {
    background-color: #f8f9fa;
    border-top: none;
}
</style>
{% endblock %}
